<template>
  <div id="complaintContentText">

    <div class="main-container">
<!--      <split-vertical title="诉单管理"></split-vertical>-->


      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <div v-if="showSearchCondition">
           <el-row>
             <el-col :span="6">
               <el-form-item label="开始时间">
                 <el-date-picker
                   v-model="ruleForm.startDate"
                   size="medium"
                   type="date"
                   format="yyyy 年 MM 月 dd 日"
                   value-format="yyyy-MM-dd"
                   placeholder="选择日期">
                 </el-date-picker>
               </el-form-item>

             </el-col>
             <el-col :span="6">
               <el-form-item label="结束时间">
                 <el-date-picker
                   size="medium"
                   v-model="ruleForm.endDate"
                   type="date"
                   format="yyyy 年 MM 月 dd 日"
                   value-format="yyyy-MM-dd"
                   placeholder="选择日期">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="6">

                 <el-form-item label="联系方式">
                   <el-input v-model="ruleForm.customerContact" size="medium" clearable placeholder="请输入联系方式"></el-input>
                 </el-form-item>

             </el-col>
             <el-col :span="6">
               <el-form-item label="诉单状态">
                 <el-select v-model="ruleForm.statusCode" placeholder="请选择" size="medium" clearable>
                   <el-option
                     v-for="item in comStatus"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="6">
               <el-form-item label="诉单日期">
                 <el-date-picker
                   size="medium"
                   format="yyyy 年 MM 月 dd 日"
                   value-format="yyyy-MM-dd"
                   v-model="ruleForm.complainTime"
                   type="date"
                   placeholder="选择日期">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="责任方">
                 <el-select v-model="ruleForm.responsibleParty" placeholder="请选择" size="medium" clearable>
                   <el-option
                     v-for="item in ResponsibleParty "
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="客诉类型">
                 <el-select v-model="ruleForm.complainType" placeholder="请选择" size="medium" clearable filterable allow-create>
                   <el-option
                     v-for="item in exchangeGoods"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="是否解决">
                 <el-select v-model="ruleForm.isSolve" placeholder="请选择" size="medium" clearable>
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row >
             <el-col :span="6">
               <el-form-item label="客户姓名">
                 <el-input v-model="ruleForm.customerName" size="medium" clearable placeholder="请输入客户姓名"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="订单编号">
                 <el-input placeholder="请输入订单编号" v-model="ruleForm.orderCode" size="medium" clearable></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item>
                 <el-button type="primary" @click="query" size="small">查询</el-button>
                 <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                 <span v-if="isSearch === true"  @click="simple" style="color:#3c8dbc">高级搜索</span>
                 <span v-else @click="simpleA" style="color:#3c8dbc;margin-left:20px;" >简单搜索</span>
               </el-form-item>
             </el-col>
           </el-row>
         </div>

        <el-row v-if="isSearch">
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input v-model="ruleForm.customerName" size="medium" clearable placeholder="请输入客户姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input placeholder="请输入订单编号" v-model="ruleForm.orderCode" size="medium" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="query" size="small">查询</el-button>
              <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
              <span v-if="isSearch === true"  @click="simple" style="color:#3c8dbc;margin-left:20px;">高级搜索</span>
              <span v-else @click="simpleA" style="color:#3c8dbc;margin-left:20px;" >简单搜索</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="stand">
      <div class="createBtn">
        <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
      </div>
      <div style="margin:0 8px;" >
        <el-table
          :data="tableData"
          :header-cell-style="getRowClass"
          @cell-dblclick="celldblclick"
          style="width: 100%;">
          <el-table-column
            prop="complainTime"
            label="日期"
            :show-overflow-tooltip="true"
            width="180">
          </el-table-column>
          <el-table-column
            prop="complainCode"
            label="客诉编码"
            :show-overflow-tooltip="true"
            width="180">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderCode"
            label="订单编号">
          </el-table-column>
          <el-table-column
            width="90"
            :show-overflow-tooltip="true"
            prop="customerName"
            label="姓名">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="customerContact"
            label="联系方式">
          </el-table-column>
          <el-table-column
            width="80"
            :show-overflow-tooltip="true"
            prop="responsibleParty"
            label="责任方">
            <template slot-scope="scope">
              <p>{{scope.row.responsibleParty | responsibleParty}}</p>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            width="80"
            prop="complainType"
            label="客诉类型">
            <template slot-scope="scope">
              <p>{{scope.row.complainType | complainType}}</p>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="statusMessage"
            label="诉单状态">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            width="80"
            prop="isSolve"
            label="是否解决">
            <template slot-scope="scope">
              <p>{{scope.row.isSolve | isSolve}}</p>
            </template>
          </el-table-column>
          <el-table-column
            width="80"
            :show-overflow-tooltip="true"
            prop="username"
            label="录入人">
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="200">
            <template slot-scope="scope">
              <el-button type='text' v-if=" scope.row.statusCode == 't0'" @click="returnOrder(scope.row.id)">退货
              </el-button>
              <el-button type='text' v-else-if=" scope.row.statusCode == 'h0'" @click="exchangeShops(scope.row.id)">换货
              </el-button>
              <el-button type='text' v-else-if="scope.row.statusCode=='b0'" @click="reissue(scope.row.id)">补发
              </el-button>
              <el-button type='text'
                         v-else-if="scope.row.statusCode=='r0' || scope.row.statusCode=='r1' || scope.row.statusCode=='r3' || scope.row.complainType =='1' || scope.row.complainType =='2'"
                         @click="stockIn(scope.row.id)">入库
              </el-button>
              <el-button type="text" @click="editComplaint(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="del(scope.row.id)">删除</el-button>
              <el-button type="text" @click="solveComplaint(scope.row.id)">解决</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
          </el-pagination>
        </div>
      </div>
      <comDel v-if="isShowDel" @closeDialog="closeDialog" :id="id"></comDel>
      <!-- 退货入库 -->
      <import-complaint v-if="isShowImport" @closeDialog="closeDialog" :items="items"></import-complaint>
      <confirm-stock v-if="isStockIn" @closeDialog="closeDialog" :stockInfo="stockInfo"></confirm-stock>


  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import axios from 'axios'
  import comDel from 'components/base/Complaint/ComDel'
  import importComplaint from 'components/base/Complaint/ImportComplaint'
  import {localStorage} from 'js/localStorage'
  import ConfirmStock from 'components/base/ConfirmStock'
  import SplitVertical from "components/common/SplitVertical"
  import VButton from "components/common/VButton"
  var comType = {
    '0': '咨询',
    '1': '退货',
    '2': '换货',
    '3': '补发'
  }
  var resList = {
    '1': '无',
    '2': '邮政',
    '3': '厂家'
  }
  var solvy = {
    "true": "已解决",
    "false": "未解决"
  }
  export default {
    inject: ['reload'],
    data() {
      return {
        isShow:false,
        operationBtnArray: [{
          text: '刷新',
          icon:'el-icon-refresh',
          show: true,
          type: 'primary',
          methodName: 'refresh',
        }, {
          text: '新增',
          show: true,
          icon:'el-icon-plus',
          type: 'success',
          methodName: 'add',
        },
          {
            text: '导出',
            icon:'el-icon-download',
            show: true,
            type: 'warning',
            methodName: 'export',
          }],
        id: '',
        value:'',
        complaint: {},
        tableData: [],
        options: [{
          value: 'true',
          label: '已解决'
        }, {
          value: 'false',
          label: '未解决'
        }],
        isShowDel: false,
        //v-model
        ruleForm:{
          startDate: '',
          endDate: '',
          orderCode: '',
          statusCode: '',
          complainTime: '',
          responsibleParty: '',
          complainType: '',
          isSolve: '',
          customerName: '',
          customerContact: '',
        },
        //list列表
        complaintList: [],
        complaintInfo: {},
        currentPage4: 1,
        show: false,
        showTip: false,
        isStockIn: false,
        pageCount: 0,
        pageIndex: 1,
        pageSize: 10,
        exchangeGoods: [
          {
            value: '0',
            label: "咨询",
          }, {
            value: '1',
            label: '退货'
          }, {
            value: '2',
            label: '换货'
          }, {
            value: '3',
            label: '补发'
          }],
        //责任方
        ResponsibleParty: [
          {
            value: '1',
            label: "无",
          }, {
            value: '2',
            label: '邮政'
          }, {
            value: '3',
            label: '厂家'
          }],
        comStatus: [
          {
            value: '0',
            label: "开始",
          }, {
            value: '1',
            label: '完成'
          }, {
            value: '2',
            label: '取消'
          }, {
            value: '3',
            label: '失败'
          }, {
            value: 't0',
            label: '申请退货开始'
          }, {
            value: 't1',
            label: '申请退货成功'
          },
          {
            value: 't2',
            label: '申请退货失败'
          },
          {
            value: 'h0',
            label: '申请换货开始'
          },
          {
            value: 'h1',
            label: '申请换货成功'
          },
          {
            value: 'h2',
            label: '申请换货失败'
          },
          {
            value: 'b0',
            label: '申请补发开始'
          },
          {
            value: 'b1',
            label: '申请补发成功'
          },
          {
            value: 'b2',
            label: '申请补发失败'
          },
          {
            value: 'r0',
            label: '申请入库开始'
          },
          {
            value: 'r1',
            label: '申请入库成功'
          },
          {
            value: 'r2',
            label: '申请入库失败'
          },
          {
            value: 'x1',
            label: '客诉异常'
          }
        ],
        isShowImport: false,
        items: {},
        stockInfo: {},
        showSearchCondition:false,
        isSearch:true,

      }
    },
    created() {
      this.init()
    },
    filters: {
      responsibleParty(type) {
        switch (type) {
          case "1" :
            return "无";
            break;
          case "2" :
            return "邮政";
            break;
          case "3" :
            return "厂家";
            break;
        }
      },
      isSolve(val) {
        if (val == true) {
          return "已解决"
        } else {
          return "未解决"
        }
      },
      complainType(type) {
        switch (type) {
          case "0" :
            return "咨询";
            break;
          case "1" :
            return "退货";
            break;
          case "2" :
            return "换货";
            break;
          case "3" :
            return "补发";
            break;
        }
      }
    },
    methods: {
      init() {
        this.userId = localStorage.get('userID')
        this.ComplaintList()
      },
      simple(){
        this.showSearchCondition=true
        this.isSearch=false
      },
      simpleA(){
        this.showSearchCondition=false,
        this.isSearch=true
      },
      query() {
        let parmas=this.ruleForm;
        parmas['pageIndex']=1
        parmas['pageSize']=10
        let success = data => {
          if (data.code == 'OK') {
            this.tableData = data.data

            this.pageCount = data.pageCount
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpComplaintList(parmas, success)
      },
      handleSearchTopBtn(methodName) {
        if (methodName === "refresh") {
          this.refresh();
        } else if(methodName == "add"){
          this.createComplaint();
        }else{
          this.exportExcel()
        }
      },
      solveComplaint(id) {
        this.tips.ConfirmModal('是否要解决此客诉', () => {
          let parmas = {
            complainId: id
          }
          let success = data => {
            if (data.code == 'OK') {
              this.$message.success(data.msg)
              this.ComplaintList()
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.erpComplaintSolve(parmas, success)
        })
      },
      //实现双击复制
      celldblclick(row, column, cell, event) {
        var _this = this
        this.$copyText(row[column.property]).then(function (e) {
          _this.$message.success("复制成功")
        }, function (e) {

        })
      },
      //关闭弹框
      closeDialog() {
        this.isShowDel = false
        this.isShowImport = false
        this.isStockIn = false
      },
      //设置表格第一行的颜色
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex == 0) {
          return 'background:#fafafa;color:rgba(0, 0, 0, 0.85)'
        } else {
          return ''
        }
      },
      //刷新
      refresh() {
        this.ComplaintList()
      },
      //table的list列表
      ComplaintList() {
        let parmas = {
          pageIndex: 1,
          pageSize: 10,
        }
        let success = data => {
          if (data.code == 'OK') {
            this.pageCount = data.pageCount
            this.tableData = data.data
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpComplaintList(parmas, success)
      },
      //退货
      returnOrder(id) {
        this.$router.push({
          path: "/complaint-returnGoods",
          query: {
            returnGoods: id
          }
        })
      },
      //换货
      exchangeShops(id) {
        this.$router.push({
          path: '/complaint-exchangeGoods',
          query: {
            returnData: id
          }
        })
      },
      //补发
      reissue(id) {
        this.$router.push({
          path: '/complaint-reissue',
          query: {
            ressiue: id
          }
        })

      },
      //导出excel
      exportExcel() {
        this.$confirm('是否要导出该文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method: 'post',
            url: '/api/erp/v1/complain/download',
            responseType: 'blob',
          }).then(res => {
            if (res.status == "200") {
              const link = document.createElement('a')
              let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '客诉信息表' + '.xlsx')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
            } else {
              this.$message.error('数据错误')
            }
          }).catch(error => {
            console.log(error, "RRRRR")
          })
        });
      },
      //重置
      resetForm(formName) {
          this.ruleForm={}
        // this.$refs[formName].resetFields();
      },
      //创建
      createComplaint() {
        this.$router.push({
          path: '/complaint-add'
        })
      },
      //入库
      stockIn(id) {
        this.isStockIn = true
        let parmas = {
          complainId: id
        }
        let success = data => {
          if (data.code == 'OK') {
            this.stockInfo = data.data
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.complainStockInItems(parmas, success)
      },
      //编辑更新
      editComplaint(id) {
        this.$router.push({
          path: '/complaint-modify',
          query: {
            editData: id
          }
        })
      },
      handleCurrentChange(val) {
        let parmas=this.ruleForm;
        parmas['pageIndex']=val;
        parmas['pageSize']=10;
        let success = data => {
          if (data.code == 'OK') {
            this.tableData = data.data
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpComplaintList(parmas, success)
      },
      //删除
      del(id) {
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parmas = {
            complainId: id,
          }
          let success = data => {
            if (data.code == 'OK') {
              this.reload()
              this.$message.success("删除成功")
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.erpComplaintDelete(parmas, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    components: {
      comDel, importComplaint, VTable, ConfirmStock, SplitVertical,VButton
    }
  }
</script>
<style  scoped>
  .el-table td {
    padding: 2px 0 !important;
  }
</style>
<style lang="scss" scoped>
  #complaintContentText {
    .main-container {
      height:auto;
      background: #fff;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      .el-form-item{
        margin-bottom: 10px !important;
        .el-select {
          width: 96%;
        }
        .el-input {
          width: 96%;
        }
      }
    }
    .createBtn {
      margin-left:10px;
      line-height:45px;
    }
    .pagination {
      padding:10px 0;
      text-align: right;
    }
  }
</style>
